<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="70vw" :fullscreen="true">
    <el-descriptions column="3" border size="large" v-loading="dataLoading">
      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Document />
            </el-icon>
            企业名称
          </div>
        </template>
        {{ detailsInfo.enterpriseName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            企业简称
          </div>
        </template>
        {{ detailsInfo.simpleName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Share />
            </el-icon>
            信用代码
          </div>
        </template>
        {{ detailsInfo.creditCode }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Fold />
            </el-icon>
            企业代号
          </div>
        </template>
        {{ detailsInfo.enterpriseCode }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <UserFilled />
            </el-icon>
            法人代表
          </div>
        </template>
        {{ detailsInfo.legalRepresentative }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Link />
            </el-icon>
            公司官网
          </div>
        </template>
        {{ detailsInfo.companyWebsite }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Avatar />
            </el-icon>
            联系人
          </div>
        </template>
        {{ detailsInfo.contactPerson }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Iphone />
            </el-icon>
            联系电话
          </div>
        </template>
        <el-tag size="small">{{ detailsInfo.mobilePhone }}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Cellphone />
            </el-icon>
            固定电话
          </div>
        </template>
        {{ detailsInfo.landlinePhone }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Calendar />
            </el-icon>
            传真号码
          </div>
        </template>
        {{ detailsInfo.faxNumber }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Eleme />
            </el-icon>
            企业邮箱
          </div>
        </template>
        {{ detailsInfo.email }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Timer />
            </el-icon>
            入选时间
          </div>
        </template>
        {{ detailsInfo.entryDate }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Lightning />
            </el-icon>
            状态
          </div>
        </template>
        <dict-tag :type="DICT_TYPE.MAINTENANCE_STATUS" :value="detailsInfo.status" />
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <OfficeBuilding />
            </el-icon>
            开户行
          </div>
        </template>
        {{ detailsInfo.bankName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Tickets />
            </el-icon>
            开户账号
          </div>
        </template>
        {{ detailsInfo.bankAccount }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Collection />
            </el-icon>
            税号
          </div>
        </template>
        {{ detailsInfo.taxNumber }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Postcard />
            </el-icon>
            发票抬头
          </div>
        </template>
        {{ detailsInfo.invoiceTitle }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <LocationFilled />
            </el-icon>
            注册地址
          </div>
        </template>
        {{ detailsInfo.registeredAddress }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Location />
            </el-icon>
            公司地址
          </div>
        </template>
        {{ detailsInfo.companyAddress }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Message />
            </el-icon>
            经营范围
          </div>
        </template>
        {{ detailsInfo.businessScope }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <ChatDotRound />
            </el-icon>
            企业信息
          </div>
        </template>
        <div class="rich-text-content" v-html="detailsInfo.enterpriseInformation"></div>
      </el-descriptions-item>


    </el-descriptions>

  </Dialog>
</template>
<script lang="ts" setup>
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('企业详细信息') // 弹窗的标题
import { propTypes } from '@/utils/propTypes'
import { MaintenanceInformationApi, MaintenanceInformation } from '@/api/business/maintenanceinformation'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'

defineOptions({ name: 'MaintenanceInformationView' })

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap.large,
  }
})

const detailsInfo = ref({
  id: undefined,
  enterpriseName: undefined,
  simpleName: undefined,
  creditCode: undefined,
  enterpriseCode: undefined,
  legalRepresentative: undefined,
  companyWebsite: undefined,
  contactPerson: undefined,
  mobilePhone: undefined,
  landlinePhone: undefined,
  faxNumber: undefined,
  email: undefined,
  entryDate: undefined,
  status: undefined,
  bankName: undefined,
  bankAccount: undefined,
  taxNumber: undefined,
  invoiceTitle: undefined,
  registeredAddress: undefined,
  companyAddress: undefined,
  businessScope: undefined,
  enterpriseInformation: undefined
})

const dataLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
/** 打开弹窗 */
const openDetailInfo = async (id?: number) => {
  dialogVisible.value = true
  // 修改时，设置数据
  if (id) {
    dataLoading.value = true
    try {
      detailsInfo.value = await MaintenanceInformationApi.getMaintenanceInformation(id)
    } finally {
      dataLoading.value = false
    }
  }
}

defineExpose({ openDetailInfo }) // 提供 openDetailInfo 方法，用于打开弹窗显示详细信息

// onMounted(async () => {

// });


</script>
